<template>
        <div id="app">
                <transition name="fade"
                            mode="out-in">
                        <router-view></router-view>
                </transition>
        </div>
</template>

<style lang="scss">
* {
        margin: 0;
        padding: 0;
}
.router-link-active {
        color: lightskyblue;
}

//入场动画
.fade-enter {
        // 动画开始时的状态
        // opacity: 0;
        // transform: scale(0);
        transform: rotate(0deg);
        // transform: scale(0) rotate(0deg);
}
.fade-enter-active {
        transition: all 0.2s;
}
.fade-enter-to {
        // 动画结束时的状态
        // opacity: 1;
        transform: rotate(360deg);
        // transform: scale(1) rotate(360deg);
}

//离场动画
.fade-leave {
        // 动画开始时的状态
        // opacity: 1;
        // transform: scale(1) rotate(360deg);
        transform: rotate(360deg);
}
.fade-leave-active {
        transition: all 0.2s;
}
.fade-leave-to {
        // 动画结束时的状态
        // opacity: 0;
        // transform: scale(0) rotate(0deg);
        transform: rotate(0deg);
}
</style>
